<template>
	<view>
		<view class="diy-imageSingle">
		  <view class="item-image" v-for="(dataItem, index) in dataList" :key="index">
			<view class="nav-to">
			  <image class="image" :src="dataItem.imgUrl" mode="widthFix"></image>
			</view>
		  </view>
		</view>
		<view class="diy-goods">
		  <view class="goods-list">
			<scroll-view>
			  <view class="goods-item" v-for="(dataItem, index) in goodsList" :key="index" @click="onTargetGoods(dataItem.goods_id)">
				  <!-- 商品图片 -->
				  <view class="goods-image">
					<image class="image" mode="aspectFill" :src="dataItem.goods_image"></image>
				  </view>
				  <view class="detail">
					<!-- 商品标题 -->
					<view class="goods-name twoline-hide">
					  <text class="twoline-hide">{{ dataItem.goods_name }}</text>
					</view>
					<!-- 商品价格 -->
					<view class="detail-price oneline-hide">
					  <text class="goods-price f-30 col-m">￥{{ dataItem.goods_price_min }}</text>
					  <text v-if="dataItem.line_price_min > 0"
						class="line-price col-9 f-24">￥{{ dataItem.line_price_min }}</text>
					</view>
				  </view>
			  </view>
			</scroll-view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [
							{
								"imgUrl": "http://static.yoshop.xany6.com/10001/20210314/0e7f6417ccccc90cf48f1359ea85ecc9.png",
								"imgName": "1(1).png",
								"link": {
									"id": "995bf1c",
									"title": "商品列表页",
									"type": "PAGE",
									"param": {
										"path": "pages/goods/list",
										"query": {
											"categoryId": "10085"
										}
									},
									"form": [
										{
											"key": "query.categoryId",
											"lable": "分类ID",
											"tips": "商品管理 -> 商品分类",
											"value": "10085"
										},
										{
											"key": "query.search",
											"lable": "关键词",
											"tips": "搜索的关键词，用于匹配商品名称",
											"value": ""
										}
									]
								}
							},
							{
								"imgUrl": "http://static.yoshop.xany6.com/10001/20210314/a33f3214d24b6268d0262dcb16a93fd2.png",
								"imgName": "2(1).png",
								"link": {
									"id": "995bf1c",
									"title": "商品列表页",
									"type": "PAGE",
									"param": {
										"path": "pages/goods/list",
										"query": {
											"categoryId": "10085"
										}
									},
									"form": [
										{
											"key": "query.categoryId",
											"lable": "分类ID",
											"tips": "商品管理 -> 商品分类",
											"value": "10085"
										},
										{
											"key": "query.search",
											"lable": "关键词",
											"tips": "搜索的关键词，用于匹配商品名称",
											"value": ""
										}
									]
								}
							},
							{
								"imgUrl": "http://static.yoshop.xany6.com/10001/20210314/1e9050ee367a64f99db4aff8e2d38a2d.png",
								"imgName": "3(1).png",
								"link": {
									"id": "995bf1c",
									"title": "商品列表页",
									"type": "PAGE",
									"param": {
										"path": "pages/goods/list",
										"query": {
											"categoryId": "10085"
										}
									},
									"form": [
										{
											"key": "query.categoryId",
											"lable": "分类ID",
											"tips": "商品管理 -> 商品分类",
											"value": "10085"
										},
										{
											"key": "query.search",
											"lable": "关键词",
											"tips": "搜索的关键词，用于匹配商品名称",
											"value": ""
										}
									]
								}
							},
							{
								"imgUrl": "http://static.yoshop.xany6.com/10001/20210314/0607338b08e9845b6db6b90d83da0f58.png",
								"imgName": "未标题-2.png",
								"link": null
							}
						],
				goodsList: [
					{
						"goods_id": 10022,
						"goods_name": "测试商品【不发货】",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/10001/20210316/5c37d15bdbaaf8a7d8d4f96b1ecce89c.jpg",
						"goods_price_min": "1.00",
						"goods_price_max": "1.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 5
					},
					{
						"goods_id": 10020,
						"goods_name": "耐克 男子 NIKE AIR FORCE 1'07 运动鞋",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/10001/20210315/b72822760ccc4bb892cc658b33af939e.jpg",
						"goods_price_min": "749.00",
						"goods_price_max": "749.00",
						"line_price_min": "799.00",
						"line_price_max": "799.00",
						"goods_sales": 17
					},
					{
						"goods_id": 10019,
						"goods_name": "清野の木 56L灰色特大号 塑料收纳箱整理箱环保加厚储物箱",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/10001/20210314/2a6e0c0ea7d1e5f0f2ac3e406198850c.jpg",
						"goods_price_min": "32.80",
						"goods_price_max": "32.80",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 174
					},
					{
						"goods_id": 10018,
						"goods_name": "简约风条纹客厅沙发卧室床头抱枕靠垫套",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/10001/20210316/41cdb778199f99ebebb6090680f382fc.png",
						"goods_price_min": "99.00",
						"goods_price_max": "99.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 137
					},
					{
						"goods_id": 10017,
						"goods_name": "三星 Galaxy S21 5G（SM-G9910）双模5G 骁龙888 超高清专业摄像 120Hz护目屏 游戏手机 8G+128G",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/10001/20210313/b51b4840c24250a67210d59e345e206d.jpg",
						"goods_price_min": "4969.00",
						"goods_price_max": "4969.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 0
					},
					{
						"goods_id": 10016,
						"goods_name": "【舒尔健动感单车】大型健身器械 减肥神器",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/20190610131953961df5569.PNG",
						"goods_price_min": "1556.00",
						"goods_price_max": "1556.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 33
					},
					{
						"goods_id": 10015,
						"goods_name": "荣耀 V10全网通 标配版 4GB+64GB 魅丽红 移动联通电信4G全面屏手机 双卡双待",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/2018071718294208f086786.jpg",
						"goods_price_min": "1899.00",
						"goods_price_max": "2199.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 0
					},
					{
						"goods_id": 10014,
						"goods_name": "三星 Galaxy S9+（SM-G9650/DS）6GB+128GB 谜夜黑 移动联通电信4G 游戏手机 双卡双待",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/20180717182009cb6bf4951.jpg",
						"goods_price_min": "6999.00",
						"goods_price_max": "7199.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 0
					},
					{
						"goods_id": 10013,
						"goods_name": "OPPO R15 直降300◆星云版新品手机 6G+128G R15梦境版 A3同款 R11S升级版 星云版 6+128G 官方标配",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/2018071718130695f254464.jpg",
						"goods_price_min": "2699.00",
						"goods_price_max": "2799.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 0
					},
					{
						"goods_id": 10012,
						"goods_name": "vivo Z1 新一代全面屏 双摄拍照手机 移动联通电信4G 双卡双待 6GB+128GB 瓷釉黑",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/20180717180357119b95367.jpg",
						"goods_price_min": "2198.00",
						"goods_price_max": "2198.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 0
					},
					{
						"goods_id": 10011,
						"goods_name": "Apple iPhone X (A1903) 64GB 深空灰色 移动联通4G手机",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/20180717175657d4f120465.jpg",
						"goods_price_min": "7099.00",
						"goods_price_max": "7299.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 0
					},
					{
						"goods_id": 10010,
						"goods_name": "Apple iPhone 8 Plus (A1864) 64GB 深空灰色 移动联通电信4G手机",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/20180717174543802b79332.jpg",
						"goods_price_min": "5099.00",
						"goods_price_max": "5599.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 0
					},
					{
						"goods_id": 10009,
						"goods_name": "荣耀9i 4GB+64GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/2018071717370507f183424.jpg",
						"goods_price_min": "1399.00",
						"goods_price_max": "1499.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 0
					},
					{
						"goods_id": 10008,
						"goods_name": "华为 HUAWEI nova 3全面屏高清四摄游戏手机 6GB+128GB 浅艾蓝限量款 全网通移动联通电信4G手机 双卡双待",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/20180717172606d9aee7835.jpg",
						"goods_price_min": "2788.00",
						"goods_price_max": "2788.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 0
					},
					{
						"goods_id": 10007,
						"goods_name": "小米6X 全网通 4GB+32GB 流沙金 移动联通电信4G手机 双卡双待 智能手机",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/2018071716542894aea9466.jpg",
						"goods_price_min": "1399.00",
						"goods_price_max": "1699.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 363
					},
					{
						"goods_id": 10006,
						"goods_name": "小米（MI） 红米6 流沙金 全网通(3G RAM+32G ROM)",
						"selling_point": "",
						"goods_image": "https://static.yoshop.xany6.com/2018071716364761fab9153.jpg",
						"goods_price_min": "739.00",
						"goods_price_max": "999.00",
						"line_price_min": "0.00",
						"line_price_max": "0.00",
						"goods_sales": 0
					}
				]
			};
		},
		methods: {
			scrolltolower(e) {
				console.log(e)
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 30; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			},
			onTargetGoods(id) {
				this.$navTo(`pages/goods/detail`, { id })
			}
		}
	}
</script>

<style lang="scss" scoped>
.diy-imageSingle .item-image .image {
    display: block;
    width: 100%;
  }
  .diy-goods {
    background: #f6f6f6;
    .goods-list {
      padding: 4rpx;
      box-sizing: border-box;
      .goods-item {
		display: block;
        box-sizing: border-box;
        padding: 6rpx;
		float: left;
		width: 50%;
  
        .goods-image {
          position: relative;
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          overflow: hidden;
          background: #fff;
  
          &:after {
            content: '';
            display: block;
            margin-top: 100%;
          }
  
          .image {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            -o-object-fit: cover;
            object-fit: cover;
          }
        }
  
        .detail {
          padding: 8rpx;
          background: #fff;
  
          .goods-name {
            min-height: 68rpx;
            line-height: 1.3;
            white-space: normal;
            color: #484848;
            font-size: 26rpx;
            margin-bottom: 4rpx;
			.twoline-hide{
				display: -webkit-box;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		  }
  
          .detail-price {
            .goods-price {
              margin-right: 8rpx;
			  color:#fa2209;
            }
  
            .line-price {
              text-decoration: line-through;
			  font-size: 24rpx;
			  color: #999;
            }
          }
        }
      }
    }
  }
</style>
